<template>
	<view class="promotion-list">
		<view class="banner">
			<swiper class="swiper" circular autoplay interval="3000">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<image :src="item.image" mode="aspectFill" class="banner-img"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="promotion-tabs">
			<view 
				class="tab-item" 
				:class="{'active': activeTab === 'ongoing'}"
				@tap="switchTab('ongoing')"
			>
				进行中
			</view>
			<view 
				class="tab-item" 
				:class="{'active': activeTab === 'upcoming'}"
				@tap="switchTab('upcoming')"
			>
				即将开始
			</view>
		</view>
		
		<view class="promotion-container">
			<view 
				v-for="(item, index) in promotionList" 
				:key="index"
				class="promotion-item"
				@tap="goToDetail(item.id)"
			>
				<image :src="item.image" mode="aspectFill" class="promo-img"></image>
				<view class="promo-info">
					<view class="promo-tag" :class="item.type">{{ item.typeText }}</view>
					<text class="promo-title">{{ item.title }}</text>
					<text class="promo-desc">{{ item.description }}</text>
					<view class="promo-time">
						<text class="time-label">{{ item.timeLabel }}</text>
						<text class="time-value">{{ item.timeValue }}</text>
					</view>
					<view class="promo-footer">
						<text class="original-price">原价: ￥{{ item.originalPrice }}</text>
						<text class="current-price">￥{{ item.currentPrice }}</text>
						<button class="action-btn" :class="item.status">{{ item.actionText }}</button>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
export default {
	name: 'PromotionList',
	data() {
		return {
			activeTab: 'ongoing',
			banners: [
				{ image: '/static/images/promo-banner1.jpg' },
				{ image: '/static/images/promo-banner2.jpg' }
			],
			promotionList: [],
			page: 1,
			loadMoreStatus: 'more'
		}
	},
	onLoad() {
		this.loadPromotions()
	},
	onReachBottom() {
		if (this.loadMoreStatus === 'more') {
			this.page++
			this.loadPromotions()
		}
	},
	methods: {
		switchTab(tab) {
			this.activeTab = tab
			this.page = 1
			this.loadPromotions()
		},
		goToDetail(id) {
			uni.navigateTo({
				url: `/pages/promotion/detail?id=${id}`
			})
		},
		async loadPromotions() {
			try {
				this.loadMoreStatus = 'loading'
				// 这里替换为实际的API调用
				const res = await this.$http.get('/api/promotions', {
					params: {
						page: this.page,
						type: this.activeTab
					}
				})
				
				if (this.page === 1) {
					this.promotionList = res.data.list
				} else {
					this.promotionList = [...this.promotionList, ...res.data.list]
				}
				
				this.loadMoreStatus = res.data.hasMore ? 'more' : 'noMore'
			} catch (e) {
				console.error(e)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.promotion-list {
	.banner {
		height: 300rpx;
		
		.swiper {
			height: 100%;
			
			.banner-img {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.promotion-tabs {
		display: flex;
		background: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		
		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			position: relative;
			
			&.active {
				color: #2196F3;
				font-weight: bold;
				
				&::after {
					content: '';
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: #2196F3;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	.promotion-container {
		padding: 20rpx;
		
		.promotion-item {
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
			
			.promo-img {
				width: 100%;
				height: 300rpx;
			}
			
			.promo-info {
				padding: 20rpx;
				
				.promo-tag {
					display: inline-block;
					padding: 4rpx 12rpx;
					border-radius: 4rpx;
					font-size: 24rpx;
					margin-bottom: 10rpx;
					
					&.discount {
						background: #FFE4E4;
						color: #FF4D4D;
					}
					
					&.special {
						background: #E4F1FF;
						color: #2196F3;
					}
					
					&.limited {
						background: #FFF3E0;
						color: #FF9800;
					}
				}
				
				.promo-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.promo-desc {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 20rpx;
					display: block;
					line-height: 1.4;
				}
				
				.promo-time {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					
					.time-label {
						font-size: 24rpx;
						color: #999;
						margin-right: 10rpx;
					}
					
					.time-value {
						font-size: 24rpx;
						color: #333;
					}
				}
				
				.promo-footer {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.original-price {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through;
					}
					
					.current-price {
						font-size: 36rpx;
						color: #FF4D4D;
						font-weight: bold;
					}
					
					.action-btn {
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 30rpx;
						font-size: 26rpx;
						
						&.ongoing {
							background: #2196F3;
							color: #fff;
						}
						
						&.upcoming {
							background: #FFF3E0;
							color: #FF9800;
						}
						
						&.ended {
							background: #f5f5f5;
							color: #999;
						}
					}
				}
			}
		}
	}
}
</style> 